<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模块的 HTML 输出规划</title>
<link rel="stylesheet" href="../css/reset.css" type="text/css" />
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<h1>模块的 HTML 输出规划</h1>
<hr />
<h3>模块的标准输出</h3>
<p>此标准输出可以实现绝大多数模块外观</p>
<pre class="prettyprint linenums">
&lt;!-- ######### module ######### --&gt;
&lt;div class="outer ding module mod"&gt;
  &lt;div class="inner ding"&gt;
    &lt;h3&gt;&lt;span&gt;模块标题&lt;/span&gt;&lt;/h3&gt;
    &lt;div class="content ding"&gt;

    &lt;/div&gt;
    &lt;div class="lt"&gt;&lt;/div&gt;&lt;div class="rt"&gt;&lt;/div&gt;&lt;div class="lb"&gt;&lt;/div&gt;&lt;div class="rb"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- ######### /module ######### --&gt;
</pre>
<hr />
<p>样式的英文命名：手风琴（Accordion）、标签切换（tabbed）、滚动（Scroll）、滑动（Slide）</p>
<hr />
<h3>Tabbed多模块的HTML输出</h3>
<pre class="prettyprint linenums">
&lt;div class="tabbedX ding" id="rcmd_hot"&gt;
  &lt;ul class="group ding"&gt;
    &lt;li&gt;&lt;a class="tab" href="#" onclick="toggleTabbedX(this);" onmouseover="toggleTabbedX(this);"&gt;&lt;span&gt;标签1&lt;/span&gt;&lt;/a&gt;
      &lt;div class="content"&gt;
        &lt;p style="padding:10px;"&gt;……&lt;/p&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="active"&gt;&lt;a class="tab" id="rcmd_hot_click" href="#" onclick="toggleTabbedX(this);" onmouseover="toggleTabbedX(this);"&gt;&lt;span&gt;标签2&lt;/span&gt;&lt;/a&gt;
      &lt;div class="content"&gt;
        &lt;ul style="padding:10px;"&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签2的第一个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签2的第二个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签2的第三个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签2的第四个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签2的第五个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签2的第六个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签2的第七个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li class="more"&gt;&amp;rsaquo; &lt;a href="#"&gt;更多&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a class="tab" href="#" onclick="toggleTabbedX(this);" onmouseover="toggleTabbedX(this);"&gt;&lt;span&gt;标签3&lt;/span&gt;&lt;/a&gt;
      &lt;div class="content"&gt;
        &lt;ul style="padding:10px;"&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第一个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第二个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第三个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第四个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第五个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第六个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第七个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&amp;rsaquo; &lt;a href="#"&gt;这里展示的是标签3的第八个列表&lt;/a&gt; &lt;span class="time"&gt;2010.12.24&lt;/span&gt;&lt;/li&gt;
          &lt;li class="more"&gt;&amp;rsaquo; &lt;a href="#"&gt;更多&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
</body>
</html>
